<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-button
            type="primary"
            @click="add('')"
          >新增素材</a-button>
          <a-button
            ghost
            type="primary"
            style="margin-left: 10px"
            @click="toWx"
          >同步微信后台素材库</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <div>
        <a-menu
          v-model="current"
          mode="horizontal"
          @click="handleClick"
        >
          <a-menu-item
            v-for="item in topMenu"
            :key="item.value"
            :value="item.value"
          >{{item.name}} </a-menu-item>
        </a-menu>
        <a-card class="list-content">
          <div
            class="ant-pro-pages-list-projects-cardList"
            style="clear: both"
          >
            <!-- :grid="{ xxl: 6, xl: 6, lg: 4, md: 3, sm: 2, xs: 1 }" -->
            <a-list
              :loading="loading"
              :data-source="dataSource"
              :grid="{ gutter: 0 }"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item"
              >
                <a-card
                  style="cursor: pointer"
                  class="ant-pro-pages-list-projects-card"
                  hoverable
                >

                  <div
                    class="ih-item"
                    v-if="type==1"
                  >
                    <img
                      slot="cover"
                      :src="item.url"
                      onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                    />

                    <div class="info">
                      <span
                        class="icon"
                        style="    line-height: 180px;"
                        @click="prevImg(item)"
                      >
                        <a-icon type="eye" />
                      </span>
                      <span
                        class="icon"
                        style=" font-size: 16px;color: #fafafa;line-height: 89px;padding: 5px;"
                      >|
                      </span>
                      <span
                        class="icon"
                        style=" line-height: 210px;"
                        @click="deleteRecord(item)"
                      >
                        <a-icon type="delete" />
                      </span>
                    </div>
                  </div>

                  <div
                    class="container"
                    v-if="type==2"
                  >

                    <span
                      class="icon"
                      @click="playMusic(item.mediaId)"
                    >
                      <a-icon type="eye" />
                    </span>
                    <span
                      class="icon"
                      style=" font-size: 16px;color: #fafafa;line-height: 109px;padding: 5px;"
                    >|
                    </span>
                    <span
                      class="icon"
                      @click="deleteRecord(item)"
                    >
                      <a-icon type="delete" />
                    </span>

                  </div>

                  <div
                    class="container"
                    v-if="type==3"
                  >

                    <span
                      class="icon"
                      @click="prevImg(item)"
                    >
                      <a-icon type="eye" />
                    </span>
                    <span
                      class="icon"
                      style=" font-size: 16px;color: #fafafa;line-height: 109px;padding: 5px;"
                    >|
                    </span>
                    <span
                      class="icon"
                      @click="deleteRecord(item)"
                    >
                      <a-icon type="delete" />
                    </span>

                  </div>

                  <div class="cardItemContent">
                    <p style="width:60%;word-break: break-all;">{{ item.name }}</p>
                    <p
                      style="color: #40a9ff;"
                      @click="copy(item.mediaId)"
                    >复制media_id</p>
                  </div>
                </a-card>
              </a-list-item>
            </a-list>
          </div>
        </a-card>
      </div>
      <div style="    display: flex;justify-content: flex-end;">
        <a-pagination
          v-model="pageNum"
          :total="total"
          :item-render="itemRender"
          :show-total="total => `共 ${total} 条记录`"
          :page-size="pageSize"
          show-quick-jumper
          @change="onChange"
        />
      </div>
    </a-card>

    <a-modal
      v-model="visible"
      title="预览"
      @ok="visible = false"
      :footer="null"
      width="60%"
      :mask="true"
    >

      <div
        class="previmg"
        v-if="type==1"
      >
        <img :src="prevImageUrl" />
        <span style="margin-left:20px;">
          <p>文件名称：{{content.name}}</p>
          <p>素材类型：图片</p>
          <p>上传时间：{{content.createTime}}</p>
          <p>media_id：{{content.mediaId}}</p>
        </span>

      </div>
      <div
        v-if="type==2"
        style="display:flex"
      >
        <audio
          :src="apiBaseUrl + '/api/gateway/basemgt-wx/WxMaterial/downloadVoiceFrequency?appid='+appid+'&mediaId='+mediaId"
          autoplay="autoplay"
          style="margin:auto"
          controls="controls"
          ref="audio"
        ></audio>
        <span style="margin-left:20px">
          <p>文件名称：{{content.name}}</p>
          <p>素材类型：音频</p>
          <p>上传时间：{{content.createTime}}</p>
          <p>media_id：{{content.mediaId}}</p>
        </span>
      </div>
      <div v-if="type==3">
        <iframe
          :src='prevImageUrl'
          frameborder="0"
          allowfullscreen
          style="width: 100%;height: 80vh;"
        ></iframe>
      </div>
    </a-modal>
    <create
      v-if="showAdd"
      :account="account"
      :appid="appid"
      @close="close"
    ></create>
  </div>

</template>
<script>
import { postAction, getAction } from '@/api/manage'
import create from './create.vue'
const topMenu = [
  {
    value: '1',
    name: '图片文件'
  },
  {
    value: '2',
    name: '音频素材'
  },
  {
    value: '3',
    name: '视频素材'
  },
  {
    value: '4',
    name: '缩略图'
  }
]
export default {
  components: {
    create
  },
  props: {
    appid: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      current: ['1'],
      topMenu,
      apiBaseUrl:'',

      brand: 'JNBY',
      urlKey: 'basemgt-wx',
      type: '1',
      dataSource: [],
      loading: false,
      visible: false,
      showHover: false,
      mediaId: '',
      prevImageUrl: '',
      menuList: [],
      content: {},
      total: 0,
      showAdd: false,
      pageNum: 1,
      pageSize: 18,
      itemRender: (current, type, originalElement) => {
        if (type === 'prev') {
          return <a>上一页</a>
        } else if (type === 'next') {
          return <a>下一页</a>
        }
        return originalElement
      }
    }
  },
  mounted() {
    this.apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
    this.loadData()
  },
  watch: {
    appid() {
      this.loadData()
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },

    close() {
      this.showAdd = false
      this.loadData()
    },
    prevImg(item) {
      if (typeof item.url == 'string' && item.url != '') {
        this.prevImageUrl = item.url
        this.content = item
        this.visible = true
      }else{
        if(this.type == 1||2){
        this.$message.error('当前素材不允许查看！')
        }else if(this.type == 3){
        this.$message.error('当前视频素材不允许播放！')

        }
      }
    },
    playMusic(mediaId) {
      this.mediaId = mediaId
      this.visible = true
    },
    add(record) {
      this.showAdd = true
      this.account = record
    },
    handleClick(e) {
      console.log('click', e.key)
      this.type = e.key
      this.pageNum = 1
      this.loadData()
    },
    onChange() {
      this.loadData()
    },
    loadData() {
      this.loading = true
      const params = {
        appid: this.appid,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type
      }
      try {
        postAction(`${this.urlKey}/WxMaterial/findWxMaterialListByCondition`, params).then(data => {
          if (data.code == 200) {
            this.dataSource = data.data.records
            this.total = data.data.total
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.error('获取列表失败！')
      } finally {
        this.loading = false
      }
    },
    deleteRecord(item) {
      if (item.saveType == 2) {
        this.$message.warning('临时素材不能删除，三天自动清除！')
      } else {
        this.$confirm({
          content: '确定要删除' + item.name + '吗？',
          onOk: () => {
            const params = {
              appid: this.appid,
              id: item.id,
              mediaId: item.mediaId
            }
            getAction(`${this.urlKey}/WxMaterial/deleteWxMaterialAndWxMediaById`, params).then(data => {
              if (data.code == 200) {
                this.$message.success('删除成功')
                this.loadData()
              } else {
                this.$message.warning(data.msg || data.message)
              }
            })
          },
          onCancel() {}
        })
      }
    },
    toWx() {
      this.$confirm({
        content: '确定要同步微信吗？',
        onOk: () => {
          const params = {
            appid: this.appid,
            dataWay: 1
          }
          postAction(`${this.urlKey}/WxMaterial/listPermanentMaterial`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('同步成功')
              this.loadData()
            } else {
              this.$message.warning(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    copy(mediaId) {
      var cInput = document.createElement('input')
      cInput.value = mediaId
      document.body.appendChild(cInput)
      cInput.select() // 选取文本框内容
      document.execCommand('copy')
      this.$message.success('media_id复制成功')
      // 复制成功后再将构造的标签 移除
      document.body.removeChild(cInput)
    }
  }
}
</script>
<style scoped lang="less">
@import './less/index.less';
.mr-10 {
  margin-right: 10px;
}
.previmg {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 400px;
  }
}
.container {
  position: relative;
  width: 100%;
  background: #969799;
  height: 0;
  padding-bottom: 56.25%;
  display: flex;
  justify-content: center;
}

.icon {
  font-size: 24px;
  color: #fafafa;
  line-height: 109px;
  padding: 5px;
}
.icon:hover {
  color: #1890ff;
}

.ih-item {
  // width: 208px;
  height: 195px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
}
.ih-item img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.ih-item .info {
  position: absolute;
  top: 0;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  -webkit-backface-visibility: hidden; /* 隐藏旋转元素的背面*/
  backface-visibility: hidden;
  background: rgba(0, 0, 0, 0.6); /*后面这个0.6是指的背景的透明度*/
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out; /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.ih-item:hover .info {
  opacity: 1; /*有opacity有0变成1*/
}
</style>

